<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <!-- <el-header class="sys-header">
      <div class="system-title">
        <img src="@/assets/logo/logo.png" class="sys-logo">
        <span>华农教务系统</span>
      </div>
      <el-icon class="search-icon"><Search /></el-icon>
    </el-header> -->

    <!-- 主体内容 -->
    <div class="main-content">

      <!-- 左侧导航 -->
      <!-- <el-aside width="220px" class="nav-sidebar">
        <el-menu
          default-active="1"
          class="sys-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item 
            v-for="item in menuItems"
            :key="item.index"
            :index="item.index"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside> -->

      <!-- 右侧内容区 -->
      <el-main class="info-container">
        <!-- 项目简介卡片 -->
        <el-card class="info-card">
          <h2 class="card-title">项目背景</h2>
          <div class="card-content">
            <p>华南农业大学教务管理系统是为适应数字化校园建设需求，基于Vue框架和Spring Boot技术栈构建的智能化管理平台。系统旨在：</p>
            <ul class="project-goals">
              <li>易操作的页面以及良好的交互体验</li>
              <li>提升教学管理效率 30%以上</li>
              <li>实现教务流程 100%线上化</li>
              <li>支持日均 5000+ 并发访问</li>
              <li>提供 7×24 小时稳定服务</li>
            </ul>
          </div>
        </el-card>

        <!-- 技术架构卡片 -->
        <el-card class="info-card">
          <h2 class="card-title">技术体系</h2>
          <div class="tech-stack">
            <el-tag type="info">Spring Boot 2.7</el-tag>
            <el-tag type="info">SpringCloud</el-tag>
            <el-tag type="success">Vue3 + Composition API</el-tag>
            <el-tag type="success">Element Plus</el-tag>
            <el-tag type="warning">Sass/SCSS</el-tag>
            <el-tag type="warning">Axios + RESTful</el-tag>
            <el-tag type="danger">Redis 6.x</el-tag>
            <el-tag type="danger">MySQL 8.0</el-tag>
          </div>
        </el-card>

        <!-- 功能模块卡片 -->
        <el-card class="info-card">
          <h2 class="card-title">核心功能</h2>
          <div class="function-list">
            <div v-for="(func,index) in functions" 
                 :key="index"
                 class="func-item">
              <el-icon class="func-icon"><CircleCheck /></el-icon>
              <span class="func-title">{{ func.title }}</span>
              <span class="func-desc">{{ func.description }}</span>
            </div>
          </div>
        </el-card>
      </el-main>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref } from 'vue'
import {
  Search,
  CircleCheck,
  Tickets,
  OfficeBuilding,
  Notebook,
  Monitor,
  Setting
} from '@element-plus/icons-vue'

// 导航菜单项
const menuItems = ref([
  { index: '1', title: '我的选课', icon: Tickets },
  { index: '2', title: '教室借用', icon: OfficeBuilding },
  { index: '3', title: '我的成绩', icon: Notebook },
  { index: '4', title: '考试信息', icon: Monitor },
  { index: '5', title: '系统管理', icon: Setting }
])

// 系统功能描述
const functions = ref([
  {
    title: '智能选课',
    description: '支持课程冲突检测、选课容量实时监控、选课结果自动保存'
  },
  {
    title: '教室调度',
    description: '可视化教室状态展示，支持多条件组合预约申请'
  },
  {
    title: '成绩管理',
    description: 'GPA自动计算、成绩单导出、历史成绩对比分析'
  },
  {
    title: '考试管理',
    description: '考场分配算法、考试时间冲突检测、准考证自动生成'
  }
])

const handleMenuSelect = (index) => {
  console.log('Selected menu:', index)
}
</script>

<style scoped lang="scss">
.app-container {
  height: 100vh;
  background: #f5f7fa;

  .sys-header {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,40,100,.08);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .system-title {
      font-size: 24px;
      color: #303133;
      font-weight: 600;
      display: flex;
      align-items: center;

      .sys-logo {
        width: 40px;
        margin-right: 12px;
      }
    }

    .search-icon {
      font-size: 20px;
      color: #909399;
      cursor: pointer;
    }
  }

  .main-content {
    display: flex;
    height: calc(100vh - 60px);

    .nav-sidebar {
      background: #fff;
      border-right: 1px solid #e6e6e6;

      .sys-menu {
        border-right: none;

        :deep(.el-menu-item) {
          height: 56px;
          font-size: 15px;
          color: #606266;

          &.is-active {
            background: #f5f7fa;
            color: #409eff;
          }
        }
      }
    }

    .info-container {
      padding: 24px;
      background: #f5f7fa;

      .info-card {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,.08);

        .card-title {
          color: #303133;
          border-left: 4px solid #409eff;
          padding-left: 12px;
          margin: 16px 0;
        }

        .project-goals {
          line-height: 2;
          color: #606266;
          padding-left: 20px;
        }

        .tech-stack {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          .el-tag {
            margin: 4px;
            font-size: 14px;
          }
        }

        .function-list {
          .func-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #ebeef5;

            .func-icon {
              color: #67c23a;
              margin-right: 12px;
            }

            .func-title {
              width: 120px;
              color: #303133;
              font-weight: 500;
            }

            .func-desc {
              color: #909399;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>